<template>
  <div>
    <navContent></navContent>
    <div class="write">
      <el-upload
        class="upload-demo"
        :show-file-list="false"
        accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :on-success="handleSuccess"
        multiple
        :limit="100"
        :on-exceed="handleExceed"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <quill-editor 
        v-model="content" 
        ref="QuillEditor" 
        :options="editorOption" 
        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
      </quill-editor>
      <div class="btn">
        <el-button type="primary" size="mini" @click="send()">发布</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import navContent from '@/components/navContent'
// import quillEditor from 'vue-quill-editor'
// import * as Quill from 'quill' //引入编辑器
// import { imageResize } from 'quill-imageResize-module';
// Quill.register('modules/imageDrop', imageResize);

const titleConfig = {
    'ql-bold':'加粗',
    'ql-color':'颜色',
    'ql-font':'字体',
    'ql-code':'插入代码',
    'ql-italic':'斜体',
    'ql-background':'背景颜色',
    'ql-size':'字体大小',
    'ql-strike':'删除线',
    'ql-script':'上标/下标',
    'ql-underline':'下划线',
    'ql-blockquote':'引用',
    'ql-header':'标题',
    'ql-indent':'缩进',
    'ql-list':'列表',
    'ql-align':'文本对齐',
    'ql-direction':'文本方向',
    'ql-code-block':'代码块',
    'ql-formula':'公式',
    'ql-image':'图片',
    'ql-video':'视频',
    'ql-clean':'清除字体样式',
};

// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{'header': 1}, {'header': 2}],               // custom button values
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
  [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
  [{'direction': 'rtl'}],                         // text direction

  [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
  [{'header': [1, 2, 3, 4, 5, 6, false]}],

  [{'color': []}],
  [{'background': []}],          // dropdown with defaults from theme
  [{'font': []}],
  [{'align': []}],
  ['image', 'video'],
  ['clean']                                         // remove formatting button
];
export default {
  name: 'write',
  components: {
    navContent,
  },
  data () {
    return {
      fileList: [],//上传文件的列表
      content: '',
      editorOption: {                
        modules: {
          toolbar: {
            container: toolbarOptions,  // 工具栏
            handlers: {
              'image': function (value) {
                if (value) {
                  document.querySelector('.el-upload .el-button').click()
                } else {
                  this.quill.format('image', false);
                }
              }
            }
          }
        }
      }
    }
  },
  mounted () {
    this.addQuillTitle()
  },
  methods:{
    // 菜单栏添加文字提示
    addQuillTitle () {
      const oToolBar = document.querySelector('.ql-toolbar'),
      aButton = oToolBar.querySelectorAll('button'),
      aSelect =  oToolBar.querySelectorAll('select');
      aButton.forEach(function(item){
        if(item.className === 'ql-script'){
            item.value === 'sub' ? item.title = '下标': item.title = '上标';
        }else if(item.className === 'ql-indent'){
            item.value === '+1' ? item.title ='向右缩进': item.title ='向左缩进';
        }else{
            item.title = titleConfig[item.classList[0]];
        }
      });
      aSelect.forEach(function(item){
        item.parentNode.title = titleConfig[item.classList[0]];
      });
    },
    //编辑器失去焦点事件
    onEditorBlur(){

    },
    //编辑器获得焦点事件
    onEditorFocus(){

    },
    //编辑器内容改变事件
    onEditorChange(){

    },
    // 点击已上传得图片函数
    handlePreview () {

    },
    // 图片列表移除文件时的钩子
    handleRemove () {

    },
    // 删除图片之前的钩子
    beforeRemove () {

    },
    // 图片超出个数限制时的钩子
    handleExceed () {

    },
    // 图片上传成功
    handleSuccess (res,file) {
      // 获取富文本组件实例
      let quill = this.$refs.QuillEditor.quill
      // 如果上传成功
      if (file) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片，file为服务器返回的图片信息
        quill.insertEmbed(length, 'image', URL.createObjectURL(file.raw))
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        // 提示信息，需引入Message
        this.$message.error('图片插入失败');
      }
    },
    // 发布
    send () {
      console.log(this.content)
    }
  }
}
</script>

<style lang="less" scoped>
.write {
  padding: 20px;
  .btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
  }
  .upload-demo {
    width: 0;
    height: 0;
    display: none;
  }
  /deep/.ql-container {
    background: #fff;
  }
}
</style>

